<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<script src="../assets/flexible/flexible.debug.js"></script>
		<script src="../assets/flexible/flexible_css.debug.js"></script>
		<!--[if lt IE 9]>
	        <script src="../assets/html5shiv.min.js"></script>
			<script src="../assets/respond.min.js"></script>
	    <![endif]-->
	    <link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
		<link rel="stylesheet" href="../assets/swiper/css/swiper.min.css"/>
		<link rel="stylesheet" href="../css/index.css"/>
		<link rel="stylesheet" href="../css/header.css"/>
		<link rel="stylesheet" href="../css/footer.css"/>
		<title>首页</title>
	</head>
	<body>
		<header class="header search">
			<div class="h-left">
				<dl>
					<dt><img src="../images/index-imgs/index-img_01.png"/></dt>
					<dd>扫一扫</dd>
				</dl>
			</div>
			<div class="h-center box-flex input-text">
				<a class="a-search-input j-search-input" href="javascript:void(0)"></a>
				<div class="img-search"><img src="../images/index-imgs/index-img_10.png"/></div>
				<input type="text" placeholder="搜索你需要的商品" class="search"/>
				<div class="img-voice"><img src="../images/index-imgs/index-img_08.png"/></div>
			</div>
			<div class="h-right">
				<dl class="news">
					<dt><img src="../images/index-imgs/index-img_12.png"/></dt>
					<dd>消息</dd>
				</dl>
			</div>
		</header>
		<main class="main">
			<section class="m-banner swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_01.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_02.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_03.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_05.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_07.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_12.png"/></a></div>
					<div class="swiper-slide"><a href="#"><img src="../images/index-imgs/index-imgs_14.png"/></a></div>
				</div>
				<div class="swiper-pagination"></div>
			</section>
			<section class="m-nav">
				<dl class="brand">
					<dt>
						<img src="../images/index-imgs/index-img_03.png">
					</dt>
					<dd>品牌</dd>
				</dl>
				<dl class="word">
					<dt>
						<img src="../images/index-imgs/index-img_05.png">
					</dt>
					<dd>全球购</dd>
				</dl>
				<dl class="classify">
					<dt>
						<img src="../images/index-imgs/index-img_07.png">
					</dt>
					<dd>分类</dd>
				</dl>
				<dl class="order">
					<dt>
						<img src="../images/index-imgs/index-img_09.png">
					</dt>
					<dd>我的订单</dd>
				</dl>
				<dl class="shou">
					<dt>
						<img src="../images/index-imgs/index-img_11.png">
					</dt>
					<dd>我的收藏</dd>
				</dl>
			</section>
			<section class="m-col">
				<div class="col-left weal"><a href="#"><img src="../images/index-imgs/index-img_18.png"/></a></div>
				<div class="col-right invite"><a href="#"><img src="../images/index-imgs/index-img_19.png"/></a></div>
			</section>
			<section class="m-list" id="app">
				<ul class="m-list_top">
					<li v-for="opts,i in list" v-on:click="tabIndex=i" v-bind:class="tabIndex==i?'ml_active':''">{{opts}}</li>
				</ul>
				<ul class="m-list_bottom">
					<li v-for="details in opts" class="opts" v-show="tabIndex==details.id||tabIndex==details.cd">
						<dl>
							<dt><a href="glance.html"><img :src="details.optsimgs"></a></dt>
							<dd><p><span>{{details.discount}}</span>{{details.title}}</p></dd>
						</dl>
					</li>
				</ul>
			</section>
		</main>
		<div id="gotop"><img src="../images/index-imgs/index-img_50.png"/></div>
		<footer class="footer">
			<dl class="f-active">
				<dt>
					<img src="../images/footer-imgs/footer-img_homeed.png"/>
				</dt>
				<dd>首页</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_cls.png"/>
				</dt>
				<dd>分类</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_time.png"/>
				</dt>
				<dd>限时特卖</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_cart.png"/>
				</dt>
				<dd>购物车</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_Admin.png"/>
				</dt>
				<dd>用户</dd>
			</dl>
		</footer>
		<div class="search-div j-search-div ts-3">
			<section class="search">
				<div class="h-left j-close-search close-search">
					<i class="fa fa-angle-left"></i>
				</div>
				<div class="h-center">
					<div class="img-search"><img src="../images/index-imgs/index-img_10.png"/></div>
					<input type="text" placeholder="搜索你需要的商品" class="searchs"/>
				</div>
				<div class="h-right">
					搜索
				</div>
			</section>
			<section class="search-con">
				
			</section>
			<footer class="yuyin"><div class="voice"><img src="../images/index-imgs/index-img_08.png"/></div>点击  说出你要的宝贝</footer>
		</div>
		<script src="../assets/jquery-3.2.1.min.js"></script>
		<script src="../assets/swiper/js/swiper.jquery.min.js"></script>
		<script src="../assets/ectouch.js"></script>
		<script src="../assets/common.js"></script>
		<script src="../assets/vue/vue.min.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/footer.js"></script>
	</body>
</html>
